<script setup lang="ts">
import { useBookStore } from '../stores/bookStore';

const store = useBookStore();

const playCurrent = () => {
  if (store.isPaused) {
    // 如果已暂停，则恢复播放
    store.resumePlayback();
  } else if (store.isPlaying) {
    // 如果正在播放，则暂停
    store.pausePlayback();
  } else {
    // 如果未播放，则开始播放
    store.playChapter(store.currentChapter);
  }
};

const stopPlayback = () => {
  store.stopPlayback();
};

const nextChapter = () => {
  if (store.currentChapter < store.chapters.length - 1) {
    store.playChapter(store.currentChapter + 1);
  }
};

const prevChapter = () => {
  if (store.currentChapter > 0) {
    store.playChapter(store.currentChapter - 1);
  }
};

const toggleSpeed = () => {
  const speeds = [0.5, 0.8, 1.0, 1.2, 1.5, 2.0];
  const currentIndex = speeds.findIndex(s => Math.abs(s - store.voiceSettings.rate) < 0.1);
  const nextIndex = (currentIndex + 1) % speeds.length;
  store.setRate(speeds[nextIndex]);
};

const getSpeedLabel = () => {
  return `${store.voiceSettings.rate.toFixed(1)}x`;
};

const toggleAutoPlay = () => {
  store.toggleAutoPlay();
};
</script>

<template>
  <div class="player-controls">
    <h3>🎮 播放控制</h3>
    
    <div class="controls-container">
      <div class="control-row">
        <button 
          @click="prevChapter" 
          class="control-btn prev-btn"
          :disabled="store.currentChapter === 0"
        >
          ⏮️ 上一章
        </button>
        
        <button 
          @click="playCurrent" 
          class="control-btn play-btn"
          :class="{ 'playing': store.isPlaying, 'paused': store.isPaused }"
        >
          {{ store.isPaused ? '▶️ 恢复' : (store.isPlaying ? '⏸️ 暂停' : '▶️ 播放') }}
        </button>
        
        <button 
          @click="nextChapter" 
          class="control-btn next-btn"
          :disabled="store.currentChapter === store.chapters.length - 1"
        >
          ⏭️ 下一章
        </button>
      </div>
      
      <div class="control-row">
        <button 
          @click="stopPlayback" 
          class="control-btn stop-btn"
        >
          ⏹️ 停止
        </button>
        
        <button 
          @click="toggleSpeed" 
          class="control-btn speed-btn"
        >
          🚀 {{ getSpeedLabel() }}
        </button>
        
        <button 
          @click="toggleAutoPlay" 
          class="control-btn auto-play-btn"
          :class="{ 'active': store.autoPlay }"
        >
          🔄 {{ store.autoPlay ? '自动播放中' : '自动播放' }}
        </button>
      </div>
    </div>
    
    <div class="progress-info">
      <div class="chapter-progress">
        <span>当前章节: {{ store.currentChapter + 1 }} / {{ store.chapters.length }}</span>
      </div>
      <div class="book-title">
        <strong>{{ store.bookTitle }}</strong>
      </div>
      <div class="keyboard-hint">
        <small>💡 提示：按空格键可以快速播放/暂停</small>
      </div>
    </div>
  </div>
</template>

<style scoped>
.player-controls {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 25px;
  box-shadow: 0 8px 32px rgba(255, 245, 157, 0.15);
  border: 1px solid rgba(255, 245, 157, 0.2);
  margin-left: 20px;
  transition: all 0.3s ease;
}

.player-controls:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 245, 157, 0.2);
}

h3 {
  color: #8d6e63;
  margin-bottom: 20px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: 600;
}

.controls-container {
  margin-bottom: 20px;
}

.control-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.control-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 120px;
}

.control-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 245, 157, 0.3);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-btn {
  background: rgba(255, 253, 231, 0.8);
  color: #8d6e63;
  border: 1px solid rgba(255, 245, 157, 0.2);
}

.next-btn {
  background: rgba(255, 253, 231, 0.8);
  color: #8d6e63;
  border: 1px solid rgba(255, 245, 157, 0.2);
}

.play-btn {
  background: rgba(255, 245, 157, 0.1);
  color: #8d6e63;
  border: 1px solid rgba(255, 245, 157, 0.3);
}

.play-btn.playing {
  background: rgba(253, 216, 53, 0.2);
  color: #8d6e63;
  border: 1px solid rgba(253, 216, 53, 0.4);
}

.play-btn.paused {
  background: rgba(255, 152, 0, 0.2);
  color: #8d6e63;
  border: 1px solid rgba(255, 152, 0, 0.4);
}

.stop-btn {
  background: rgba(255, 235, 238, 0.8);
  color: #d32f2f;
  border: 1px solid rgba(244, 67, 54, 0.2);
}

.speed-btn {
  background: rgba(255, 253, 231, 0.8);
  color: #8d6e63;
  border: 1px solid rgba(255, 245, 157, 0.2);
}

.auto-play-btn {
  background: rgba(255, 253, 231, 0.8);
  color: #8d6e63;
  border: 1px solid rgba(255, 245, 157, 0.2);
}

.auto-play-btn.active {
  background: linear-gradient(135deg, #fdd835, #fff59d);
  color: #8d6e63;
  border: 1px solid rgba(253, 216, 53, 0.4);
  animation: pulse 2s infinite;
  box-shadow: 0 4px 15px rgba(253, 216, 53, 0.3);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.progress-info {
  text-align: center;
  padding: 20px;
  background: rgba(255, 253, 231, 0.6);
  border-radius: 15px;
  border: 1px solid rgba(255, 245, 157, 0.1);
}

.chapter-progress {
  color: #8d6e63;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.book-title {
  color: #8d6e63;
  font-size: 1.1rem;
  font-weight: 600;
}

.keyboard-hint {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 245, 157, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 245, 157, 0.2);
}

.keyboard-hint small {
  color: #8d6e63;
  font-size: 0.85rem;
  font-style: italic;
}
</style>
